<script setup>
import baseModel from "@/components/baseModel/baseModel.vue";
import { computed, ref } from "vue";

const props = defineProps({
    max: {
        type: Number,
        default: 99999
    }
})
const videoNum = ref(1);

const disableSubmit = computed(() => {
    return !videoNum.value || videoNum.value > props.max || videoNum.value <= 0
})

const emit = defineEmits(["handleOk"]);
const dialog = ref(null);
const showModal = () => {
    dialog.value.showModal();
};
const closeModal = () => {
    dialog.value.closeModal();
    videoNum.value = "";
}
const handleOk = () => {
    emit('handleOk', videoNum.value)
    dialog.value.closeModal();
    videoNum.value = "";

}
defineExpose({
    showModal,
    closeModal
});
</script>

<template>
    <div>
        <baseModel ref="dialog">
            <template #title>
                <div class="title_box">
                    <h2 class="title">定量选择</h2>
                    <span class="tips_top">优先选择重复度低的视频</span>
                </div>

            </template>
            <template #content>
                <div class="content">
                    <div class="input_box">
                        <span>选择前</span>
                        <a-input-number class="ipt" v-model:value="videoNum" :min="1" :max="props.max" />
                        <span>条视频</span>
                    </div>

                    <span class="bottom_tips">温馨提示：若导出的视频包含重复视频，可能导致视频没有流量</span>
                </div>
            </template>
            <template #footer>
                <a-button key="back" @click="closeModal">取消</a-button>
                <a-button key="submit" type="primary" :loading="loading" :disabled="disableSubmit"
                    @click="handleOk">确定</a-button>
            </template>
        </baseModel>
    </div>
</template>



<style lang="less" scoped>
.title_box {
    .title {
        font-size: 18px;
        color: #1c1f23;
        font-weight: 600;
    }

    .tips_top {
        font-size: 13px;
        color: #42464e;
    }

}

.content {
    .input_box {
        margin-bottom: 20px;
        display: flex;
        align-items: center;

        .ipt {
            margin: 0 10px;
            color: #1c1f23;
        }
    }

    .bottom_tips {
        font-size: 13px;
        color: #737a87;
    }
}
</style>